<template>
	<view class="content commonPop">
		<view class="topBox">
			<view class="leftBtn">
				
			</view>
			<view class="wuList">
				<view class="wuli" @click="changeTab(index)" :class="suo === index?'active':''" v-for="(item,index) in tabList" :key="index">
					<view class="wuImg">
						<image :src="'../../static/wu'+(index + 1)+'.png'" mode=""></image>
					</view>
					<text>{{item}}</text>
				</view>
				
			</view>
		</view>
		
		<view class="serviceForm">
			<view class="serTitle">
				填写{{baseTitle}}信息
			</view>
			<view class="formli" v-if="formData.serviceType !== 3">
				<view class="leftBox">
					设备名称：
					 <view style="width: 200rpx;">
					 	<u--input
					 	  readonly
						  placeholderStyle="color:#979797;font-size: 30rpx;"
						  @click.native="showDeviceList"
					 	  placeholder="请选择或添加设备"
					 	  border="none"
					 	  :customStyle="inputStyle"
					 	  v-model="formData.deviceName"
					 	></u--input>
					 </view>
					
				</view>
				
				<view class="rightBox">
					<view class="scanBtn" @click="scanForm">
						扫码
					</view>
					<view class="addBtn" @click="addDevice">
						添加
					</view>
				</view>
			</view>
			
			<view class="formli">
				<view class="leftBox">
					时间段：
				</view>
				<view class="rightBox" style="width:440rpx;">
					<u--input
					  placeholder="请选择"
					  inputAlign="right"
					  placeholderStyle="color:#979797;font-size: 30rpx;"
					  readonly
					  @click.native="chooseTime"
					  :customStyle="inputStyle"
					  border="none"
					  suffixIcon="arrow-right"
					  suffixIconStyle="color:#595959;font-size: 28rpx;"
					  v-model="formData.appointmentTimePeriod"
					></u--input>
				</view>
			</view>	
			
			<view class="formli">
				<view class="leftBox">
					联系地址：
				</view>
				<view class="rightBox" style="width:440rpx;">
					<u--input
					  placeholder="请选择联系地址"
					  inputAlign="right"
					  placeholderStyle="color:#979797;font-size: 30rpx;"
					  readonly
					  @click.native="showAddressDiag"
					  :customStyle="inputStyle"
					  border="none"
					  suffixIcon="arrow-right"
					  suffixIconStyle="color:#595959;font-size: 28rpx;"
					  v-model="formData.contactAddress"
					></u--input>
					
				</view>
			</view>	
		</view>
		
		<view class="otherForm">
			<view class="remarkBox">
				<text>备注：</text>
				<input type="text" v-model="formData.remark" placeholder="输入备注内容" />
			</view>
			
			<view class="formli" style="display: inherit;padding-bottom:32rpx;" v-if="suo == 3">
				<view class="leftBox">
					预约内容：
				</view>
				
				<view class="yueInfo">
					<text @click="chooseXun(item,index)" :class="yueIndex === index?'active':''" v-for="(item,index) in xunList" :key="index">{{item.dictLabel}}</text>
				</view>
				
				<view class="remarkBox" style="padding:0;margin:20rpx 0;" v-if="isMark">
					<input type="text" v-model="formData.remark" placeholder="输入内容" />
				</view>	
				
				<view class="leftBox" v-if="specialList.length > 0">
					专项巡检：
				</view>
				<view class="yueInfo yueInfo22" v-if="specialList.length > 0">
					<text @click="chooseSpecial(item,index)" :class="sppIndex === index?'active':''" v-for="(item,index) in specialList" :key="index">{{item.dictLabel}}</text>
				</view>
				
				<view class="remarkBox" style="padding:0;margin:20rpx 0;" v-if="isMarkTwo">
					<input type="text" v-model="formData.remark" placeholder="输入内容" />
				</view>
				
			</view>	
			
			<view class="formli" v-if="suo != 3">
				<view class="leftBox">
					预约内容：
				</view>
				
				<view class="rightBox" style="width:440rpx;">
					<u--input
						placeholder="请选择"
						inputAlign="right"
						placeholderStyle="color:#979797;font-size: 30rpx;"
						readonly
						@click.native="showType"
						:customStyle="inputStyle"
						border="none"
						suffixIcon="arrow-right"
						suffixIconStyle="color:#595959;font-size: 28rpx;"
						v-model="formData.appointmentType"
					></u--input>
				</view>
			</view>
				
			<view class="imgBox">
				<text>上传图片</text>
				 <u-upload
					style="width:144rpx;height:144rpx;border-radius:12rpx;"
				    :fileList="fileList"
				    @afterRead="afterRead"
				    @delete="deletePic"
				    name="1"
				    multiple
				    :maxCount="10"
				  >
				  </u-upload>
			</view>
		</view>
		
		<view class="bottomBox">
			<view class="chartBtn">
				<image src="../../static/man.png"></image>
				<button open-type="contact">
					<text>联系客服</text>
				</button>
			</view>
			<view class="sumitBtn" @click="goForm">
				提交
			</view>
		</view>
		
		<!-- 预约时间框 -->
		<u-popup :show="show" mode="bottom">
			<view class="timeBox">
				<view class="timeWrap">
					<view class="time_top">
						<text>选择预约时间段</text>
						<view class="guanBox" @click="show = false">
							<view class="closeBtn"></view>
						</view>
					</view>
					
					<view class="dateTxt">
						{{currentTime}}
					</view>
					
					<view class="timeList">
						<view class="xqTxt">
							<text v-for="(item,index) in zhouList" :key="index">周{{item}}</text>
						</view>
						
						<view class="dttBox">
							<text @click="changeTime(index)" :class="timeIndex === index?'active':''" v-for="(item,index) in dateArr" 
								:key="index">{{item.dateTxt}}</text>
						</view>
					</view>
				
					<view class="schuledList2">
						<!-- <block v-for="(item,index) in tiemList" :key="index"> -->
							<!-- <view class="duli"> -->
								<!-- {{item.label}} -->
	<!-- 							<u-radio-group>
									
								</u-radio-group> -->
								<!-- <u-radio :checked="item.checked" shape="circle"></u-radio> -->
								<u-radio-group 
									style="flex-direction: column;"
									labelSize="30rpx"
									labelColor="#333"
									v-model="timeTxt"
									iconPlacement="right">
									<u-radio v-for="(item,index) in tiemList" :disabled="item.checked" :key="index" :label="item.name" 
										:name="item.name"></u-radio>
								</u-radio-group>
							<!-- </view> -->
						<!-- </block> -->
					</view>
				</view>
				
				<view class="timeBottom">
					<view class="timeBtn" @click="conformDate">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="isHide" :round="10" mode="bottom">
			<view class="addressBox">
				<view class="address_top">
					选择预约内容
					<view class="guanBox" @click="isHide = false">
						<view class="closeBtn"></view>
					</view>
					
				</view>
				<view class="reservationList">
					<text :class="typeIndex === index?'active':''" v-for="(item,index) in yueList" :key="index" @click="chooseType(item,index)">{{item.dictLabel}}</text>
				</view>
			</view>
		</u-popup>	
			
		<u-popup v-if="isAddress" :show="isAddress" :round="10" mode="bottom">
			<view class="addressBox">
				<view class="address_top">
					地址管理
					<view class="guanBox" @click="isAddress = false">
						<view class="closeBtn"></view>
					</view>	
					
				</view>
				<view class="addressList">
					<view class="adli" @click="chooseAddress(item)" v-for="(item,index) in addressList" :key="index">
						<view class="addName">
							{{item.userName}} {{item.phone}}
						</view>
						<view class="addTxt">
							{{item.address}}
						</view>
						<view class="btnBox">
							<u-checkbox-group size="mini">
								<u-checkbox @change.stop="chooseDefalut($event,index)" :checked="item.isDefault == 1" v-model="item.isDefault" 
									shape="circle" label="默认地址" labelSize="28rpx"></u-checkbox>
							</u-checkbox-group>

							
							<view class="optypeBtn">
								<text @click.stop="editAddress(item)">编辑</text>
								<text @click.stop="deleteAddress(item)">删除</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="addBox" @click="isAdd = true">
					新建地址
				</view>
				
			</view>
		</u-popup>	
		
		<u-popup :show="isOther" :round="10" mode="bottom">
			<view class="addressBox">
				<view class="address_top">
					预约内容
					<view class="guanBox" @click="isOther = false">
						<view class="closeBtn"></view>
					</view>
				</view>
				
				<view class="zhineng">
					<text>预约内容：</text>
					<textarea name="" v-model="remarkk" id="" cols="30" rows="10"></textarea>
				</view>
				
				<view class="bottomWrap">
					<view class="botButton" @click="isOther = false">
						取消
					</view>
					<view class="botButton" @click="saveRemark">
						保存
					</view>
				</view>
			</view>
		</u-popup>		
		
		<u-popup :show="isAdd" :round="10" mode="bottom">
			<view class="addressBox">
				<view class="address_top">
					{{optype == 1?'新增':'修改'}}地址
					<view class="closeBtn" @click="isAdd = false"></view>
				</view>
				<view class="plusBox">
					<view class="plusli">
						<label>所在地区：</label>
						<view class="rightWrap rightWrap2 flexxx">
							<input type="text" readonly @click="showLocation" v-model="addressForm.address" placeholder="省、市、区、街道" />
							<view class="caoBox position" @click="showLocation"></view>
						</view>
						
					</view>
					<view class="plusli plusli2">
						<text>详细地址：</text>
						<textarea name="" id="" v-model="detailAddress" cols="30" rows="10"></textarea>
					</view>
					
					<view class="plusli">
						<label>联系人：</label>
						<view class="caoBox rightWrap flexxx">
							<input type="text" v-model="addressForm.userName" placeholder="请输入" />
						</view>
					</view>
					
					<view class="plusli">
						<label>联系方式：</label>
						<view class="caoBox rightWrap flexxx">
							<input type="number"  v-model="addressForm.phone" placeholder="请输入" />
						</view>
					</view>
				</view>
				
				<view class="zhineng">
					<text>智能识别：</text>
					<view class="zhiBox">
						<textarea name="" v-model="zhiTxt" @input="coutTxt" placeholder="[粘贴识别]或输入文本，智能拆分姓名、电话、地址" id="" cols="30" rows="10"></textarea>
						<view class="zhiBtn" v-if="isHide">
							<view class="btn11" @click="cancelInput">取消</view>
							<view class="btn22" @click="shibie">智能识别</view>
						</view>
					</view>
				</view>
				
				<view class="bottomWrap">
					<view class="botButton" @click="isAdd = false">
						取消
					</view>
					<view class="botButton" @click="saveAddress">
						保存
					</view>
				</view>
			</view>	
		</u-popup>	
		
		<u-modal :show="isMore" title="设置数量" :showCancelButton="true" @confirm="confirmMore" @cancel="isMore = false">
			<view class="slot-content" style="width:100%;">
				<u-number-box v-model="moreNum" :inputWidth="200"></u-number-box>
			</view>
		</u-modal>
				
		<u-picker :show="isDevice" title="设备列表" keyName="deviceName" :columns="deviceList" @cancel="isDevice = false" @confirm="confirmDevice"></u-picker>
		
		<u-picker :show="isNumber" title="选择数" :columns="numberList" @cancel="isNumber = false" @confirm="confirmNumber"></u-picker>	
	</view>
	
</template>

<script>
	import { getAddressList, addAddress,deleteAddressInfo, modifyAddress, getDict, addRepairorder, getDeviceByCode,
			 getUserInfoDetail, getDeviceList } from '@/api/login.js';
	import baseUrl  from '@/util/config.js';
	import moment from 'moment';
	export default {
		data() {
			return {
				isHide: false,
				isDevice: false,
				isMore: false,
				suo: '',
				baseTitle: '',
				isMoren: false,
				timeIndex: 0,
				currentTime: '',
				isTourist: false,
				tabList: ['安装服务','维修服务','保养换芯','巡检服务'],
				zhouList: [],
				deviceList: [],
				tiemList: [
					{name:'07:00-08:00',checked: false},{name:'08:00-09:00',checked: false},
					{name:'09:00-10:00',checked: false},{name:'10:00-11:00',checked: false},{name:'11:00-12:00',checked: false},
					{name:'12:00-13:00',checked: false},{name:'13:00-14:00',checked: false},{name:'14:00-15:00',checked: false},
					{name:'15:00-16:00',checked: false},{name:'16:00-17:00',checked: false},{name:'17:00-18:00',checked: false}
				],
				fileList: [],
				zhiTxt: '',
				timeTxt: '',
				moreNum: 1,
				xunList: [],
				isMark: false,
				isMarkTwo: false,
				show: false,
				isOther: false,
				isNumber: false,
				isAddress: false,
				isHide: false,
				isAdd: false,
				optype: 1,
				remarkk: '',
				yueIndex: '',
				numberList: [[1,2,3,4,5,'更多']],
				addressList: [],
				yueList: [],
				typeIndex: '',
				currentTimeTxt: '',
				specialList: [],
				dateArr: [],
				sppIndex: '',
				detailAddress: '',
				formData:{
					serviceType: 0,
					deviceId: '',
					deviceName: '',
					enterpriseId: '',
					appointmentContent: '',
					appointmentTimePeriod: '',
					appointmentType: '',
					contactAddress: '',
					contactName: '',
					contactPhone: '',
					customerComment: '',
					customerRating: '',
					imageUrl: '',
					projectId: '',
					quantity: '',
					specialInspectionType: '',
					remark: ''
				},
				addressForm:{
					address: '',
					phone: '',
					isDefault: 0,
					userName:''
				},
				inputStyle:{
					'font-size':'30rpx',
					'color':'#333',
					'text-align': 'right',
					'height':'112rpx',
					'line-height':'112rpx',
				}
			}
		},
		onLoad(opt) {
			let today = moment();
			// 遍历近七天的日期和星期几
			this.zhouList = [];
			for (let i = 0; i < 7; i++) {
			  let date = today.clone().add(moment().format('HH') > 17?(i + 1):i, 'days');
			  this.zhouList.push(this.xingFmt(date.format('E')));
			}
			this.formData.serviceType = opt.idd;
			this.suo = parseInt(opt.idd);
			this.nameFmt(this.suo);
			// this.judgeType();
			if(this.suo == 3) {
				this.getXunList();
			}
			if(opt.deviceCode != undefined) {
				this.getDeviceInfo(opt.deviceCode);
			}
			this.setNavTitle(this.suo);
		},
		onShow() {			 
			// let nowTime = moment().format('HH:mm');
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1]; // 当前页的实例
			if(currPage.$vm.value == 1) {
				console.log(currPage.$vm.deviceInfo);
				this.formData.deviceId = currPage.$vm.deviceInfo.id;
				this.formData.deviceName = currPage.$vm.deviceInfo.deviceName;
				this.formData.enterpriseId = currPage.$vm.deviceInfo.enterpriseId;
			}	
		},
		methods: {
			// 展示设备列表
			showDeviceList(){
				if(uni.getStorageSync('userToken') == '') {
					return uni.$u.toast('请先登录！');
				}
				if(uni.getStorageSync('userInfo').companyId == null) {
					return uni.$u.toast('请先绑定企业！');
				}
				getDeviceList({enterpriseId:uni.getStorageSync('userInfo').companyId,auditStatus: 0}).then(res=>{
					if(res.code == 200) {
						this.deviceList = [res.rows];
						this.isDevice = true;
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			confirmDevice(val){
				this.formData.deviceId = val.value[0].id;
				this.formData.deviceName = val.value[0].deviceName;
				this.formData.enterpriseId = val.value[0].enterpriseId;
				this.isDevice = false;
			},
			xingFmt(val){
				if(val == 1) {
					return '一';
				} else if(val == 2){
					return '二';
				} else if(val == 3){
					return '三';
				} else if(val == 4){
					return '四';
				} else if(val == 5){
					return '五';
				} else if(val == 6){
					return '六';
				} else if(val == 7){
					return '日';
				}
			},
			changeTab(index){
				console.log(index);
				this.suo = index;
				// this.formData.serviceType = index;
				this.isTourist = true;
				this.nameFmt(this.suo);
				this.setNavTitle(index);
				if(this.suo == 3) {
					this.getXunList();
				}
				this.formData = {
					deviceId: '',
					deviceName: '',
					enterpriseId: '',
					appointmentContent: '',
					appointmentTimePeriod: '',
					appointmentType: '',
					contactAddress: '',
					contactName: '',
					contactPhone: '',
					customerComment: '',
					customerRating: '',
					imageUrl: '',
					projectId: '',
					quantity: '',
					serviceType: index,
					specialInspectionType: '',
					remark: ''
				};
				console.log(this.formData.serviceType)
			},
			nameFmt(val){
				if(val == 0) {
					this.baseTitle = '安装';
				} else if(val == 1) {
					this.baseTitle = '维修';
				} else if(val == 2) {
					this.baseTitle = '保养';
				} else if(val == 3) {
					this.baseTitle = '巡检';
				}
			},
			setNavTitle(idd){
				if(idd == 0) {
					this.setTitle('安装服务');
				} else if(idd == 1) {
					this.setTitle('维修服务');
				} else if(idd == 2) {
					this.setTitle('保养服务');
				} else if(idd == 3) {
					this.setTitle('巡检服务');
				}
			},
			// 判断是否是游客
			judgeType(){
				// 判断如果没有绑定也可以去预约
				getUserInfoDetail({id: uni.getStorageSync('userInfo').id}).then(res=>{
					if(res.data.companyId == null) {
						this.isTourist = true;
					} else {
						if(res.data.companyName == null) {
							this.isTourist = true;
						} else {
							this.isTourist = false;
						}
					}	
				});	
			},
			coutTxt(){
				if(this.zhiTxt != '') {
					this.isHide = true;
				} else {
					this.isHide = false;
				}
			},
			// 设置标题
			setTitle(ttt){
				uni.setNavigationBarTitle({
					title: ttt
				})
			},
			cancelInput(){
				this.zhiTxt = '';
				this.isHide = false;
			},
			shibie(){
				if(String(this.zhiTxt).includes('、')) {
					if(this.countCharacter(this.zhiTxt,'、') == 2) {
						// console.log(this.zhiTxt.split('、'));
						this.addressForm.userName = this.zhiTxt.split('、')[0];
						this.addressForm.phone = this.zhiTxt.split('、')[1];
						this.addressForm.address = this.zhiTxt.split('、')[2];
					} else {
						return uni.$u.toast('输入格式不正确!');
					}
				} else {
					return uni.$u.toast('输入格式不正确!');
				}
			},
			countCharacter(str, char) {
			    return str.split('').reduce((count, c) => count + (c === char ? 1 : 0), 0);
			},
			getDeviceInfo(val){
				getDeviceByCode({deviceCode: val}).then(res=>{
					if(res.code == 200) {
						this.formData.deviceId = res.data.id;
						this.formData.deviceName = res.data.deviceName;
						// this.formData.enterpriseId = res.data.enterpriseId;
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			chooseDefalut(val, index){
				this.addressList[index].isDefault = val?1:0;
				modifyAddress(this.addressList[index]).then(res=>{
					if(res.code == 200) {
						this.showAddress();
					} else {
						uni.$u.toast(res.msg);
					}	
				});
			},
			showLocation(){
				uni.authorize({
					scope: 'scope.userLocation',
					success: (ress) => {
						console.log(ress,'===1234')
					  uni.chooseLocation({
						success: (res) => {
							console.log(res);
						  this.addressForm.address = res.address || res.name;
						},
						fail: (error) => {
							console.log(error);
						  uni.showToast({ title: '定位失败', icon: 'none' });
						},
					  });
					},
					fail: () => {
					  uni.showModal({
						title: '授权提示',
						content: '需要您授权地理位置权限',
						success: (modalRes) => {
						  if (modalRes.confirm) {
							uni.openSetting();
						  }
						},
					  });
					},
				});
			},
			// 选择时间段
			changeTime(index){
				let chooseDate = this.dateArr[index].monthTxt + '-' + this.dateArr[index].dateTxt;
				if(chooseDate != moment().format('MM-DD')) {
					this.tiemList.forEach((item,index)=>{
						item.checked = false;
					});
				} else {
					this.showTimee();
				}
				this.timeIndex = index;
			},
			// 选择时间段
			chooseTime(){
				this.currentTime = moment().format('YYYY年MM月');
				this.currentTimeTxt = moment().format('YYYY-MM');
				// 初始化一个空数组来存储日期
				let datesArray = [];
				// 循环两周的每一天，从今天开始向前推算
				for (let i = 0; i < 14; i++) {
				    const month = moment().clone().add(moment().format('HH') > 17?(i + 1):i, 'days').format('MM');
					const date = moment().clone().add(moment().format('HH') > 17?(i + 1):i, 'days').format('DD');
					let objj = {
						monthTxt: month,
						dateTxt: date
					}
				    datesArray.push(objj);
				}
				this.dateArr = datesArray;
				this.showTimee();
				this.show = true;
			},
			showTimee(){
				let suoArr = [];
				this.tiemList.forEach((item,index)=>{
					if(moment().format('HH:mm') > String(item.name).split('-')[0] && moment().format('HH:mm') < String(item.name).split('-')[1]){
						suoArr.push(index);
					} 
				});
				if(suoArr.length > 0) {
					this.tiemList.forEach((item,index)=>{
						if(index > suoArr[0]) {
							item.checked = false;
						} else {
							item.checked = true;
						}
					});	 
				}
			},
			conformDate(){
				if(this.timeTxt == ''){
					return uni.$u.toast('请选择时间段');
				}
				this.formData.appointmentTimePeriod =  this.currentTimeTxt.split('-')[0] + '-' + this.dateArr[this.timeIndex].monthTxt + '-' + this.dateArr[this.timeIndex].dateTxt + ' '+ this.timeTxt;
				this.show = false;
			},
			chooseXun(val,index){
				this.yueIndex = index;
				if(val.dictLabel == '专项巡检') {
					getDict({dictType: 'kt_special_inspection_type'}).then(res=>{
						if(res.code == 200) {
							this.specialList = res.rows;
						} else {
							uni.$u.toast(res.msg);
						}
					});	
				} else {
					
				}
				if(val.dictLabel == '其他') {
					this.isMark = true;
				} else {
					this.isMark = false;
				}
				this.formData.appointmentType = val.dictLabel;
			},
			chooseSpecial(val,index) {
				this.sppIndex = index;
				if(val.dictLabel == '其他') {
					this.isMarkTwo = true;
				} else {
					this.isMarkTwo = false;
				}
				this.specialInspectionType = val.dictLabel;
			},
			getXunList() {
				getDict({dictType: 'kt_inspection_type'}).then(res=>{
					if(res.code == 200) {
						this.xunList = res.rows;
					} else {
						uni.$u.toast(res.msg);
					}
				});	
			},
			goChart(){
				uni.navigateBack({
					delta: 1
				})
			},
			goForm(){
				if(uni.getStorageSync('userToken') == '') {
					return uni.$u.toast('请先登录！');
				}
				if(uni.getStorageSync('userInfo').companyId == null) {
					return uni.$u.toast('请先绑定企业！');
				}
				if(this.formData.serviceType != 3 && !this.isTourist) {
					if(this.formData.deviceName == '') {
						// return uni.$u.toast('请选择设备。');
					}
				}
				
				if(this.formData.appointmentType == '') {
					return uni.$u.toast('请选择预约内容。');
				}
				if(this.fileList.length > 0) {
					let urlArr = [];
					this.fileList.forEach(item=>{
						urlArr.push(item.url);
					});
					this.formData.imageUrl = urlArr.toString();
				} else {
					this.formData.imageUrl = '';
				}
				// if(this.formData.serviceType == 3) {
					
				// }
				this.formData.enterpriseId = uni.getStorageSync('userInfo').companyId;
				console.log(this.formData);
				// return;
				uni.showLoading({
					title: '提交中...'
				});
				addRepairorder(this.formData).then(res=>{
					uni.hideLoading();
					if(res.code == 200) {
						uni.$u.toast('操作成功!');
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							});
						},500);
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			chooseAddress(val){
				console.log(val);
				this.formData.contactAddress = val.address;
				this.formData.contactName = val.userName;
				this.formData.contactPhone = val.phone;
				this.isAddress = false;
			},
			afterRead(event) {
				console.log(event);
				let wenList = event.file;
				wenList.forEach(item=>{
					uni.uploadFile({
						url: baseUrl.baseUrl + '/common/upload',
						filePath: item.url,
						name: 'file',
						header: {
							Authorization: 'Bearer ' + uni.getStorageSync('userToken')
						},
						formData: {
							frontFileType: 'picture'
						},
						success: res => {
							var jsurl = JSON.parse(res.data)
							if (jsurl.code != 200) {
								return uni.$u.toast(jsurl.msg);
							}
							if(jsurl.url != '') {
								let objj = {
									url: jsurl.url
								};
								this.fileList.push(objj);
							} else {
								uni.$u.toast('上传错误!');
							}
						}
					});
				})
			},
			deletePic(val){
				console.log(val);
				this.fileList.splice(val.index,1);
			},
			showType(){
				let dianName;
				if(this.suo == 0) {
					dianName = 'kt_install_type';
				} else if(this.suo == 1) {
					dianName = 'kt_repair_type';
				} else if(this.suo == 2) {
					dianName = 'kt_maintain_type';
				} else if(this.suo == 3) {
					dianName = 'kt_inspection_type';
				}
				getDict({dictType: dianName}).then(res=>{
					this.yueList = res.rows;
					this.isHide = true;
				});
			},
			saveRemark(){
				if(this.remarkk == '') {
					return uni.$u.toast('请输入预约内容。');
				}
				this.formData.appointmentContent = this.remarkk;
				this.formData.appointmentType = '其他';
				this.formData.quantity = '';
				this.isOther = false;
				this.isHide = false;
			},
			chooseType(val,index){
				this.typeIndex = index;
				if(val.dictLabel == '其他') {
					this.isOther = true;
				} else {
					this.isNumber = true;
				}
				this.isHide = false;
			},
			confirmNumber(val) {
				// console.log(val.value[0]);
				// console.log(this.yueList[this.typeIndex]);
				if(val.value[0] == '更多') {
					this.isNumber = false;
					this.isMore = true;
					this.moreNum = 1;
				} else {
					this.formData.appointmentType = this.yueList[this.typeIndex].dictLabel;
					this.formData.quantity = val.value[0];
					this.isNumber = false;
					this.isHide = false;
				}
				
			},
			confirmMore(){
				if(parseFloat(this.moreNum) < 1) {
					return uni.$u.toast('请输入数量!'); 
				}
				this.formData.appointmentType = this.yueList[this.typeIndex].dictLabel;
				this.formData.quantity = this.moreNum;
				this.isMore = false;
			},
			// 修改地址
			editAddress(val) {
				this.optype = 2;
				this.addressForm = JSON.parse(JSON.stringify(val));
				this.isAdd = true;
			},
			deleteAddress(val){
				console.log(val);
				uni.showModal({
				    title: '提示',
				    content: '确定要删除嘛?',
				    success: res => {
				        if (res.confirm) {
				            console.log('用户点击确定');
							deleteAddressInfo(val.id).then(res=>{
								if(res.code == 200) {
									this.showAddress();
								} else {
									uni.$u.toast(res.msg);
								}
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			saveAddress(){
				if(this.addressForm.address == '') {
					return uni.$u.toast('地址不能为空!');
				}
				if(this.addressForm.contactName == '') {
					return uni.$u.toast('联系人不能为空!');
				}
				if(this.addressForm.contactPhone == '') {
					return uni.$u.toast('联系电话不能为空!');
				}
				// console.log(this.addressForm);
				
				if(this.optype == 1) {
					addAddress(this.addressForm).then(res=>{
						if(res.code == 200) {
							uni.$u.toast('操作成功!');
							this.isAdd = false;
							this.showAddress();
						} else {
							uni.$u.toast(res.msg);
						}
					});
				} else {
					modifyAddress(this.addressForm).then(res=>{
						if(res.code == 200) {
							uni.$u.toast('操作成功!');
							this.isAdd = false;
							this.showAddress();
						} else {
							uni.$u.toast(res.msg);
						}
					})
				}
			},
			showAddressDiag(){
				if(uni.getStorageSync('userToken') == '') {
					// return uni.$u.toast('请先登录！');
					uni.switchTab({
						url: '/pages/mine/index'
					});
					return false;
				}
				if(uni.getStorageSync('userInfo').companyId == null) {
					return uni.$u.toast('请先绑定企业！');
				}
				this.optype = 1;
				this.showAddress(1);
			},
			showAddress(type){
				getAddressList().then(res=>{
					if(res.code == 200) {
						this.addressList = res.rows;
						if(type == 1) {
							this.isAddress = true;
						}
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			addDevice(){
				if(uni.getStorageSync('userToken') == '') {
					// return uni.$u.toast('请先登录！');
					uni.switchTab({
						url: '/pages/mine/index'
					});
					return false;
				}
				if(uni.getStorageSync('userInfo').companyId == null) {
					return uni.$u.toast('请先绑定企业！');
				}
				uni.navigateTo({
					url:'/pages/index/addDevice'
				});
			},
			// 扫码功能
			scanForm(){
				if(uni.getStorageSync('userToken') == '') {
					// return uni.$u.toast('请先登录！');
					uni.switchTab({
						url: '/pages/mine/index'
					});
					return false;
				}
				if(uni.getStorageSync('userInfo').companyId == null) {
					return uni.$u.toast('请先绑定企业！');
				}
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						console.log(res);
						if (res.result) {
							const val = res.result;
							let isTxt = uni.getStorageSync('userInfo').isMaster == null?'':uni.getStorageSync('userInfo').isMaster;
							getDeviceByCode({deviceCode: val,isMaster: isTxt}).then(res=>{
								if(res.code == 200) {
									this.formData.deviceId = res.data.id;
									this.formData.deviceName = res.data.deviceName;
									this.formData.enterpriseId = res.data.enterpriseId;
								} else {
									uni.$u.toast(res.msg);
								}
							})
						} else {
							uni.$u.toast('请重新扫描!');
							return false;
						}
					},
					fail: (res) => {
						uni.$u.toast('未识别到二维码!');
						// console.log('未识别到二维码');
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addressBox{
		background-color:#F5F5F5;padding:24rpx;border-radius:32rpx 32rpx 0 0;touch-action: none;
		.address_top{
			@include baseFont(32rpx,#333,44rpx);text-align: center;font-weight:500;margin-bottom:26rpx;position: relative;
			.guanBox{
				width:80rpx;position: absolute;top:50%;right:0;height:24rpx;display: flex;justify-content: flex-end;
				.closeBtn{
					width:24rpx;height:24rpx;background:url('../../static/closeBtn.png') no-repeat;background-size:24rpx;
					transform: translateY(-50%);
				}
			}	
		}
		.bottomWrap{
			height:180rpx;background-color:#fff;box-shadow: 0px -4rpx 16rpx 0px #0000000A;box-shadow: 0px 0px 24rpx -8rpx #00000008;
			@include flx;justify-content: space-between;margin-top:14rpx;
			.botButton{
				width:336rpx;height:80rpx;background: linear-gradient(90deg, #588FFF 0%, #3671E9 100%);text-align: center;
				border-radius:68rpx;@include baseFont(30rpx,#fff,80rpx);font-weight:500;margin-top:18rpx;
			}
			// .botButton:first-of-type{
			// 	margin-left:24rpx;
			// }
			// .botButton:last-of-type{
			// 	margin-right:24rpx;
			// }
		}
		.zhineng{
			background-color:#fff;border-radius:12rpx;padding:32rpx;
			text{
				display: block;@include baseFont(30rpx,#333,42rpx);padding:0 0 20rpx;
			}
			.zhiBox{
				position: relative;
				.zhiBtn{
					position: absolute;bottom:20rpx;right:32rpx;z-index: 9999;
					@include flx;
					.btn11{
						@include baseFont(26rpx,#979797,48rpx);margin-right:24rpx;
					}
					.btn22{
						width: 144rpx;height: 48rpx;background: linear-gradient( 90deg, #6696F9 0%, #3671E9 100%);
						border-radius: 48rpx;text-align: center;@include baseFont(26rpx,#fff,48rpx);
					}
				}
				textarea{
					display: block;background-color:#F6F6F6;border-radius:8rpx;width:calc(100% - 40rpx);padding:20rpx 20rpx;
					@include baseFont(28rpx,#333,40rpx);height:122rpx;
				}
			}
			
		}
		.plusBox{
			background-color:#fff;border-radius:12rpx;margin-bottom:16rpx;
			.plusli{
				@include flx;justify-content: space-between;border-bottom:1px solid #F0F0F0;
				@include baseFont(30rpx,#333,112rpx);padding:0 32rpx;align-items: center;
				label{
					display: block;width:25%;
				}
				input{
					@include baseFont(30rpx,#333,112rpx);height:112rpx;text-align: right;width:100%;
				}
				textarea{
					display: block;background-color:#F6F6F6;border-radius:8rpx;width:calc(100% - 40rpx);
					@include baseFont(28rpx,#333,40rpx);height:92rpx;margin-bottom:32rpx;padding:14rpx 20rpx;
				}
				.caoBox{
					
				}
				.rightWrap{
					width:75%;
				}
				.rightWrap2{
					align-items: center;
				}
				.position{
					width:30rpx;height:38rpx;background: url('../../static/position.png') no-repeat; 
					background-size:cover; margin-left:8rpx;
				}
			}
			.plusli2{
				justify-content: inherit;display: inherit;
				text{
					display: block;line-height:38rpx;padding:32rpx 0 16rpx;
				}
			}
		}
		.reservationList{
			text{
				display: block;background-color:#fff;width:100%;height:112rpx;text-align: center;border-radius:8rpx;
				margin-bottom:16rpx;@include baseFont(30rpx,#262626,112rpx);font-weight:500;
			}
			.active{
				background-color:#E8EFFF;
			}
		}
		.addBox{
			background: linear-gradient(90deg, #588FFF 0%, #3671E9 100%);border-radius:68rpx;font-weight:500;
			text-align: center;width:704rpx;height:80rpx;@include baseFont(30rpx,#fff,80rpx);
			margin:90rpx 0 68rpx;
		}
		.addressList{
			.adli{
				box-shadow: 0px -1px 0px 0px #F0F0F0 inset;background-color:#fff;border-radius:8rpx;margin-bottom:12rpx;
				padding:0 32rpx;
				.addName{
					@include baseFont(30rpx,#262626,38rpx);font-weight:500;padding:32rpx 0 8rpx;
				}
				.addTxt{
					@include baseFont(26rpx,#8C8C8C,32rpx);padding-bottom:24rpx;border-bottom:1px solid #F0F0F0;
				}
				.btnBox{
					@include flx;justify-content: space-between;padding:24rpx 0 32rpx;align-items: center;
					.chooseBtn{
						@include flx;@include baseFont(28rpx,#8C8C8C,40rpx);
					}
					.optypeBtn{
						font-size:0;
						text{
							@include baseFont(28rpx,#8C8C8C,36rpx);display: inline-block;padding-left:44rpx;
						}
						text:first-of-type{
							background: url('../../static/editBtn.png') no-repeat left center;
							background-size:32rpx;
						}
						text:last-of-type{
							background: url('../../static/deleteBtn.png') no-repeat left center;
							background-size:32rpx;margin-left:40rpx;
						}
					}
					
				}
			}
		}
	}
	.timeBox{
		background-color:#F5F5F5;padding:24rpx 0;border-radius:32rpx 32rpx 0 0;touch-action: none;
		.timeWrap{
			padding:0 24rpx;
			.time_top{
				@include baseFont(32rpx,#333,44rpx);text-align: center;font-weight:500;position: relative;
				.guanBox{
					width:80rpx;position: absolute;top:50%;right:0;height:24rpx;display: flex;justify-content: flex-end;
					.closeBtn{
						width:24rpx;height:24rpx;background:url('../../static/closeBtn.png') no-repeat;background-size:24rpx;
						transform: translateY(-50%);
					}
				}
			}
			.dateTxt{
				@include baseFont(32rpx,#333,44rpx);text-align: center;margin:34rpx 0 18rpx;
			}
			.schuledList{
				.duli{
					@include flx;justify-content: space-between;margin-bottom:32rpx;@include baseFont(30rpx,#333,44rpx);
					font-weight:500;align-items: center;
				}
			}
		}
		
		.timeBottom{
			height:162rpx;background-color:#fff;width:100%;padding:18rpx 0 0;
			.timeBtn{
				height:80rpx;text-align: center;background: linear-gradient(90deg, #588FFF 0%, #3671E9 100%);
				@include baseFont(30rpx,#fff,80rpx);font-weight:500;border-radius:68rpx;margin:0 28rpx 0 24rpx;
			}
			
		}
		.timeList{
			.xqTxt{
				@include flx;justify-content: space-between;
				text{
					display: block;@include baseFont(28rpx,#979797,44rpx);text-align: center;width:14.28%;
				}
			}
			.dttBox{
				@include flx;justify-content: space-between;flex-wrap: wrap;
				text{
					display: block;@include baseFont(28rpx,#333,80rpx);text-align: center;width:80rpx;height:80rpx;
					margin-right:20rpx;margin-bottom:15rpx;
					// width:14.28%;
				}
				.active{
					width:80rpx;height:80rpx;background-color:#3671E9;color:#fff;border-radius:64rpx;
				}
			}
		}
	}
.content{
	background-color:#F4F5F7;min-height: 100vh;padding-bottom:240rpx;
	.bottomBox{
		position: fixed;bottom:0;left:0;width:100%;display: flex;flex-direction: row;
		height:180rpx;box-shadow: 0px -4rpx 16rpx 0px #0000000A;background-color:#fff;
		box-shadow: 0px 0px 24rpx -8rpx #00000008;display: flex;justify-content: space-between;
		.sumitBtn{
			width:466rpx;height:80rpx;background: linear-gradient(90deg, #588FFF 0%, #3671E9 100%);margin-right:28rpx;
			text-align: center;border-radius:68rpx;@include baseFont(30rpx,#fff,80rpx);margin-top:18rpx;
		}
		.chartBtn{
			width:170rpx;height:80rpx;background:#EFEFF1;text-align: right;@include flx;justify-content: space-between;
			border-radius:68rpx;padding:0 20rpx;margin-top:18rpx;margin-left:24rpx;align-items: center;
			text{
				display: block;@include baseFont(24rpx,#17181B,80rpx);
			}
			image{
				width:56rpx;height:56rpx;display: block;
			}
		}
	}
	.otherForm{
		box-shadow: 0px -1px 0px 0px #F0F0F0 inset;background-color:#fff;margin:16rpx 24rpx 0;border-radius:12rpx;
		.remarkBox{
			padding:0 32rpx 32rpx;border-bottom:1px solid #F0F0F0;
			text{
				display: block;@include baseFont(30rpx,#333,42rpx);padding:32rpx 0 16rpx;
			}
			input{
				display: block;border:none;background-color:#F6F6F6;height:80rpx;border-radius:8rpx;
				@include baseFont(28rpx,#333,80rpx);padding:0 20rpx;
			}
		}
		.imgBox{
			padding:32rpx;
			text{
				display: block;@include baseFont(30rpx,#333,42rpx);padding:0 0 16rpx;
			}
		}
		.formli{
			@include flx;justify-content: space-between;border-bottom:1px solid #F0F0F0;
			padding:0 32rpx;
			.yueInfo{
				background-color:#f6f6f6;height:108rpx;@include flx;padding:0 20rpx;justify-content: space-between;align-items: center;
				text{
					display: block;width:178rpx;height:68rpx;text-align: center;@include baseFont(28rpx,#666,68rpx);
				}
				.active{
					background-color:#fff;box-shadow: 1px 1px 8rpx 0px rgba(0, 0, 0, 0.1);color:#333;font-weight:500;
				}
			}
			.yueInfo22{
				text{
					width:271rpx;
				}
			}
			.leftBox{
				@include baseFont(30rpx,#333,112rpx);@include flx;
				input{
					@include baseFont(30rpx,#333,112rpx);display: block;height:112rpx;width: 200rpx;
				}
			}
			.rightBox{
				.chooseTxt{
					@include baseFont(30rpx,#333,112rpx);padding-right:36rpx;
					background: url('../../static/right.png') no-repeat right center;background-size:24rpx 26rpx;
				}
			}
		}	
	}
	.serviceForm{
		box-shadow: 0px -1px 0px 0px #F0F0F0 inset;background-color:#fff;margin:-20rpx 24rpx 0;border-radius:12rpx;
		.serTitle{
			@include baseFont(30rpx,#333,86rpx);padding-left: 54rpx;position: relative;border-bottom:1px solid #F0F0F0;
		}
		.serTitle::after{
			content:'';width:6rpx;height:30rpx;background: linear-gradient(180deg, #3671E9 0%, #7297E2 100%);border-radius:24rpx;
			position: absolute;left:32rpx;top:50%;transform: translateY(-50%);
		}
		.formli{
			@include flx;justify-content: space-between;border-bottom:1px solid #F0F0F0;
			padding:0 32rpx;
			.leftBox{
				@include baseFont(30rpx,#333,112rpx);@include flx;
				input{
					@include baseFont(30rpx,#333,112rpx);display: block;height:112rpx;width: 200rpx;
				}
			}
			.rightBox{
				@include flx;
				.scanBtn{
					@include baseFont(28rpx,#3671E9,112rpx);padding-left:40rpx;padding-right:32rpx;
					background: url('../../static/scan.png') no-repeat left center;background-size:28rpx;position: relative;
				}
				.scanBtn::after{
					content:'';width:1px;height:28rpx;background-color:#D9D9D9;position: absolute;right:0;top:50%;
					transform: translateY(-50%);
				}
				.addBtn{
					@include baseFont(28rpx,#3671E9,112rpx);
					padding-left:40rpx;margin-left:32rpx;
					background: url('../../static/addBtn.png') no-repeat left center;background-size:28rpx;
				}
				.chooseTxt{
					@include baseFont(30rpx,#333,112rpx);
					padding-right:36rpx;
					background: url('../../static/right.png') no-repeat right center;background-size:24rpx 26rpx;
				}
			}
		}
	}
	.topBox{
		background: #467DEB;
		.wuList{
			@include flx;justify-content: space-between;padding:12rpx 58rpx 50rpx;
			.wuli{
				position: relative;
				.wuImg{
					width:60rpx;height:60rpx;display: flex;align-items: flex-end;margin:0 auto;
					image{
						display: block;width:60rpx;height:60rpx;
					}
				}
				text{
					display: block;text-align: center;@include baseFont(28rpx,#fff,40rpx);
				}
			}
			.wuli:nth-of-type(3){
				image{
					width:48rpx;height:48rpx;
				}
			}
			.wuli:nth-of-type(4){
				image{
					width:52rpx;height:52rpx;
				}
			}
			.active::after{
				position: absolute;bottom:-33rpx;left:50%;width:66rpx;height:16rpx;background: url('../../static/top.png') no-repeat;
				background-size:66rpx 16rpx;content:'';transform: translateX(-50%);
			}
		}
	}
}
</style>
